<!DOCTYPE html>
<html lang="en">
<!-- https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html#probetype 官方文档 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            height: 200px;
            background-color: yellow;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- betterscroll生效必须要有外面一层wrapper -->
    <div class="content">
        <ul>
            <li>列表数据1</li>
            <li>列表数据2</li>
            <li>列表数据3</li>
            <li>列表数据4</li>
            <li>列表数据5</li>
            <li>列表数据6</li>
            <li>列表数据7</li>
            <li>列表数据8</li>
            <li>列表数据9</li>
            <li>列表数据10</li>
            <li>列表数据11</li>
            <li>列表数据12</li>
            <li>列表数据13</li>
            <li>列表数据14</li>
            <li>列表数据15</li>
            <li>列表数据16</li>
            <li>列表数据17</li>
            <li>列表数据18</li>
            <li>列表数据19</li>
            <li>列表数据20</li>
            <li>列表数据21</li>
            <li>列表数据22</li>
            <li>列表数据23</li>
            <li>列表数据24</li>
            <li>列表数据25</li>
            <li>列表数据26</li>
            <li>列表数据27</li>
            <li>列表数据28</li>
            <li>列表数据29</li>
            <li>列表数据30</li>
            <li>列表数据31</li>
            <li>列表数据32</li>
            <li>列表数据33</li>
            <li>列表数据34</li>
            <li>列表数据35</li>
            <li>列表数据36</li>
            <li>列表数据37</li>
            <li>列表数据38</li>
            <li>列表数据39</li>
            <li>列表数据40</li>
            <li>列表数据41</li>
            <li>列表数据42</li>
            <li>列表数据43</li>
            <li>列表数据44</li>
            <li>列表数据45</li>
            <li>列表数据46</li>
            <li>列表数据47</li>
            <li>列表数据48</li>
            <li>列表数据49</li>
            <li>列表数据50</li>
            <li>列表数据51</li>
            <li>列表数据52</li>
            <li>列表数据53</li>
            <li>列表数据54</li>
            <li>列表数据55</li>
            <li>列表数据56</li>
            <li>列表数据57</li>
            <li>列表数据58</li>
            <li>列表数据59</li>
            <li>列表数据60</li>
            <li>列表数据61</li>
            <li>列表数据62</li>
            <li>列表数据63</li>
            <li>列表数据64</li>
            <li>列表数据65</li>
            <li>列表数据66</li>
            <li>列表数据67</li>
            <li>列表数据68</li>
            <li>列表数据69</li>
            <li>列表数据70</li>
            <li>列表数据71</li>
            <li>列表数据72</li>
            <li>列表数据73</li>
            <li>列表数据74</li>
            <li>列表数据75</li>
            <li>列表数据76</li>
            <li>列表数据77</li>
            <li>列表数据78</li>
            <li>列表数据79</li>
            <li>列表数据80</li>
            <li>列表数据81</li>
            <li>列表数据82</li>
            <li>列表数据83</li>
            <li>列表数据84</li>
            <li>列表数据85</li>
            <li>列表数据86</li>
            <li>列表数据87</li>
            <li>列表数据88</li>
            <li>列表数据89</li>
            <li>列表数据90</li>
            <li>列表数据91</li>
            <li>列表数据92</li>
            <li>列表数据93</li>
            <li>列表数据94</li>
            <li>列表数据95</li>
            <li>列表数据96</li>
            <li>列表数据97</li>
            <li>列表数据98</li>
            <li>列表数据99</li>
            <li>列表数据100</li>
        </ul>
    </div>
    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
    <!-- <script src="./better-scroll.js"></script> -->
    <script>
        let wrapper = document.querySelector('.content')
        let bs = BetterScroll.createBScroll(wrapper, {
            // 1. probeType 为 0，在任何时候都不派发 scroll 事件，
            // 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
            // 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
            // 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
            probeType: 2,
            pullUpload: true,
            // wheel:true,
            // click:true,
            bounceTime: 3000
        })

        bs.on('scroll', position => {
            console.log(position);
        })
       
        // 当滚动到阀值的时候，调用方法 可以拿来做下拉加载更多的功能 
        // 这个方法不生效了 要看最新的官方文档
        bs.on('pullingUp',()=>{
            console.log('到底了');
            setTimeout(() => {
                console.log('请求网络数据成功');
                //告诉betterscroll准备好下一次处罚pullingup
                bs.finshPullUp();
            }, 2000);
        })
        console.log(BetterScroll);
    </script>
</body>

</html>